<template>
  <div class="container">
    <div class="app-container">
      <el-row class="myRow">
        <el-col :span="24">
          <el-card>
            <el-button type="danger" @click="$router.push('/social/archive')">归档记录</el-button>
            <el-button type="primary">202301报表</el-button>
          </el-card>
        </el-col>
      </el-row>
      <el-row class="myRow">
        <el-card>
          <el-row>
            <el-col :span="24" :offset="1">
              <el-form label-position="right" label-width="100px">
                <el-form-item label="部门:">
                  <el-checkbox-group v-model="queryParams.departmentChecks">
                    <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id" name="type" @change="changeDep">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="社保城市:">
                  <el-checkbox-group v-model="queryParams.socialSecurityChecks">
                    <el-checkbox v-for="item in cityList" :key="item.id" :label="item.id" name="type" @change="changeDep">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>

                <el-form-item label="公积金城市:">
                  <el-checkbox-group v-model="queryParams.providentFundChecks">
                    <el-checkbox v-for="item in cityList" :key="item.id" :label="item.id" name="type" @change="changeDep">
                      {{ item.name }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </el-card>
      </el-row>

      <el-row>
        <el-card>
          <el-table
            :data="tableData"
            border
            style="width: 100%"
          >
            <el-table-column type="index" label="序号" width="80" />
            <el-table-column prop="username" label="姓名" width="180" />
            <el-table-column prop="mobile" label="手机" width="180" />
            <el-table-column prop="workNumber" label="工号" width="180" />
            <el-table-column prop="departmentName" label="部门" width="180" />
            <el-table-column prop="timeOfEntry" label="入职时间" width="180" />
            <el-table-column prop="leaveTime" label="离职时间" width="180" />
            <el-table-column prop="participatingInTheCity" label="社保城市" width="180" />
            <el-table-column prop="providentFundCity" label="公积金城市" width="180" />
            <el-table-column prop="socialSecurityBase" label="社保基数" width="180" />
            <el-table-column prop="providentFundBase" label="公积金基数" width="180" />
          </el-table>
          <div class="block">
            <el-pagination
              :current-page.sync="queryParams.page"
              :page-size="queryParams.pageSize"
              layout=" prev, pager, next"
              :total="total"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getDepartment } from '@/api/department'
import { getCityList } from '@/api/role'
import { getSocialSecuritysList } from '@/api/socialSecuritys'
export default {
  name: 'Social',
  data() {
    return {
      queryParams: {
        page: 1,
        pageSize: 10,
        socialSecurityChecks: [],
        providentFundChecks: [],
        departmentChecks: []
      },
      tableData: [],
      departmentList: [],
      cityList: [],
      total: 0
    }
  },
  created() {
    this.getDepartment()
    this.getCityList()
    this.loadData()
  },
  methods: {
    // 部门，社保城市，公积金城市选中后刷新数据
    changeDep() {
      console.log('changeDep', this.queryParams)
      this.loadData()
    },
    async getDepartment() {
      const res = await getDepartment()
      this.departmentList = res
    },
    async getCityList() {
      const res = await getCityList()
      this.cityList = res
    },
    async loadData() {
      const res = await getSocialSecuritysList(this.queryParams)

      console.log('loadData', res)
      this.tableData = res.rows
      this.total = res.total
    },
    handleCurrentChange() {
      this.loadData()
    }
  }
}
</script>

<style scoped>
.myRow {
    margin-bottom: 20px;
  }
  .block{
    text-align: center;
    margin-top: 10px;
  }
</style>
